<template>
	<view>
		<tab 
		        v-model="activeKey" 
		        :navData="scrollData"
		        @change="tabChange"
		        @tabClick="tabClick"
		    >
		        <view :slot="item.slot" v-for="(item,key) in scrollData" :key="key">
		            <scroll-view scroll-y height="400rpx">
		                <view class="shop" v-for="(item,index) in scrollDatalist">
							<view class="shop_top">{{item.state}}</view>
							<view class="shop_center">
								<view class="center_img">
									<image :src="item.img" style="width: 88%;height: 65px;margin-top: 10px;margin-left: 6%;"></image>
								</view>
								<view class="center_title">
									<view class="title_name">{{item.name}}</view>
									<view class="title_tip">拼团人数{{item.num}}人</view>
								</view>
								<view class="center_price">
									￥{{item.price}}
								</view>
							</view>
							<view class="shop_bottom">
								<view class="bottom_img" v-for="item in 5">
									<image src="../../static/images/list3.png" style="width: 35px;height: 35px;"></image>
								</view>
							</view>
						</view>
		            </scroll-view>
		        </view>
		    </tab>
	</view>
</template>

<script>
	import tab from '@/components/Mark-Tab/Tab.vue';
	export default {
	    data() {
	        return {
	            activeKey:0,
	            scrollData:[
	                {
	                    label:'全部',
	                    slot:'slot-1'
	                },
	                {
	                    label:'待付款',
	                    slot:'slot-2'
	                },
	                {
	                    label:'待发货',
	                    slot:'slot-3'
	                },
	                {
	                    label:'待收货',
	                    slot:'slot-4'
	                }
	            ],
				scrollDatalist:[
					{state:'待发货',img:'../../static/images/Jshop1.png',name:'活动名称',num:6,price:'158.00'},
					{state:'待付款',img:'../../static/images/Jshop1.png',name:'活动名称',num:6,price:'158.00'},
					{state:'待收货',img:'../../static/images/Jshop1.png',name:'活动名称',num:6,price:'158.00'},
					{state:'待付款',img:'../../static/images/Jshop1.png',name:'活动名称',num:6,price:'158.00'},
					{state:'待发货',img:'../../static/images/Jshop1.png',name:'活动名称',num:6,price:'158.00'},
					{state:'待收货',img:'../../static/images/Jshop1.png',name:'活动名称',num:6,price:'158.00'},
					{state:'待收货',img:'../../static/images/Jshop1.png',name:'活动名称',num:6,price:'158.00'},
					{state:'待发货',img:'../../static/images/Jshop1.png',name:'活动名称',num:6,price:'158.00'},
					{state:'待付款',img:'../../static/images/Jshop1.png',name:'活动名称',num:6,price:'158.00'},
					{state:'待发货',img:'../../static/images/Jshop1.png',name:'活动名称',num:6,price:'158.00'},
					{state:'待付款',img:'../../static/images/Jshop1.png',name:'活动名称',num:6,price:'158.00'}
				]
	        }
	    },
	    components:{tab},
	    methods: {
	        tabChange(e){
	            console.log(e);
	        },
	        tabClick(e){
	            console.log(e);
	        }
	    }
	}
</script>

<style scoped>
    .shop{
		width: 96%;
		height: 200px;
		border-radius: 10px;
		background-color: #fff;
		margin-left: 2%;
		margin-top: 1%;
	} 
	.shop_top{
		width: 100%;
		height: 25px;
		line-height: 70px;
		color: orange;
		text-align: center;
		font-size: 14px
	}
	.shop_center{
		width: 100%;
		height: 100px;
		display: flex;
		flex-wrap: nowrap;
		margin-top: 20px;
	}
	.center_img{
		width: 25%;
		height: 100px;
	}
	.center_title{
		width: 50%;
		height: 100px;
	}
	.title_name{
		width: 100%;
		height: 50px;
		line-height: 55px;
	}
	.title_tip{
		width: 100px;
		height: 20px;
		background-color: #F0AD4E;
		color: #E43D33;
		font-size: 12px;
		text-align: center;
		line-height: 20px;
	}
	.center_price{
		width: 25%;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}
	.shop_bottom{
		width: 50%;
		height: 100px;
        display: flex;
		flex-wrap: nowrap;
		margin-left: 25%;
	}
	.bottom_img{
		width: 35px;
		height: 35px;
	}
</style>
